<template>
  <view class="wrap" :style="{height:statuHeight+'px'}">
   <top-tab tabTitle="银行卡添加" @backClick="backClick" backColor="#5B2177"></top-tab>
	 <view class="main">
		 <view class="title">我的钱包</view>
		 <view class="add-bank" @click="$refs.popup.open()">
			<view class="icon-add_bankcard">
				<view class="icons-box"><uni-icons type="plusempty" size="20" color="#CECECE"></uni-icons></view>
				<view class="add-bankcard">添加新卡</view>
			</view>
		 </view>
		 <!-- 银行卡 -->
		 <view class="bank_card-list">
			<uni-swipe-action-item :right-options="options" @click="onClick" @change="change">
				<template v-slot:right>
					<view class="swipe-icon-box">
						<view class="action-right">
							<view class="iconfont">&#xe689;</view>
						</view>
						<view class="action-right-del">
							<view class="iconfont delter">&#xe612;</view>
						</view>
					</view>
				</template>
			  <view class="bank-carg-code">
			  	<view class="logo"></view>
			  	<view class="card-num-round">
			  		<view class="item-name-num">
			  			<view>交通银行信用卡</view>
			  			<view class="num-code">●●●● 5212</view>
			  		</view>
			  		<view class="color-box">
			  			<view class="red-round"></view>
			  			<view class="red-yellow"></view>
			  		</view>
			  	</view>
			  </view>     
			</uni-swipe-action-item>

		 </view>
	 </view>
	 <!-- 新增弹窗 -->
	 <uni-popup ref="popup" type="center"  border-radius="5px" background-color="#fff">
		 <view class="popup-wrap" style="border-radius: 5px;">
			<view class="popup-main">
						<view class="item-title">增加银行卡</view>
						<view class="subhead">请填写以下发票信息</view>
						<view class="imput-title">
							<view class="title">选择银行</view>
							<picker @change="bindPickerChange" class="picker" :value="pickerText" :range="array">
								<view style="color: #333333;padding-left: 76rpx;" v-if="pickerText>-1">{{array[pickerText]}}</view>
								<view class="prcker-name" v-else>请选择</view>
							</picker>
							<view class="iconfont">&#xe60b;</view>
						</view>
						<view class="imput-title" style="margin: 20rpx 0;">
							<view class="title">银行卡号</view>
							<input placeholder="输入银行卡号" 
							placeholder-style="font-size: 24rpx;color: #73757F;"
							class="uni-input"/>
						</view>
						<view class="imput-title">
							<view class="title">开户人</view>
							<input placeholder="输入开户人" 
							placeholder-style="font-size: 24rpx;color: #73757F;" class="uni-input"/>
						</view>
						<view class="imput-title" style="margin: 20rpx 0;">
							<view class="title">开户地址</view>
							<input placeholder="输入开户地址" 
							placeholder-style="font-size: 24rpx;color: #73757F;" class="uni-input"/>
						</view>
			</view>
			<view class="footer"> 
				<view class="cancel">取消</view>
				<view class="save">保存</view>
			</view> 
		 </view>
	 </uni-popup>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {
				pickerText: -1,
				array: ['中国', '美国', '巴西', '日本'],
				statuHeight: uni.getSystemInfoSync().screenHeight,
			}
    },
  onShow() {},
  methods: {
		bindPickerChange(e) {
			this.pickerText = e.target.value
		},
		// 返回
		backClick() {
			uni.navigateTo({
			   url: '/pages/my/set/set'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #F2F2F2;
		.main{
			padding: 67rpx 24rpx;
			.title{
				font-size: 60rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #2D2D2D;
			}
			.add-bank{
				width: 100%;
				height: 168rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 20rpx 0;
				line-height: 168rpx;
				.icon-add_bankcard{
					display: flex;
					align-items: center;
					margin-left: 36rpx;
					.icons-box{
						width: 76rpx;
						height: 96rpx;
						background: #F7F7F7;
						border-radius: 24rpx;
						line-height: 96rpx;
						text-align: center;
					}
					.add-bankcard{
						font-size: 28rpx;
						color: #8F92A1;
						margin-left: 37rpx;
					}
				}
			}	
			.bank_card-list{
				width: 100%;
				background: #FFFFFF;
				padding:24rpx;
				border-radius: 24rpx;
				box-sizing: border-box;
				.swipe-icon-box{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.action-right, .action-right-del{
						width: 76rpx;
						height: 76rpx;
						background: #B743ED;
						border-radius: 24rpx;
						line-height: 76rpx;
						text-align: center;
						margin-bottom: 16rpx;
						.iconfont{
							color: #FFFFFF;
							font-size: 40rpx;
						}
					}
					.action-right-del{
						background: rgb(247, 232, 229);
						.delter{
							color: red  ;
						}
					}
				}
			
				.bank-carg-code{
					width: 638rpx;
					height: 356rpx;
					background: #2D2D2D;
					border-radius: 24rpx;
					overflow: hidden;
					.logo{
						width: 70rpx;
						height: 56rpx;
						background: #E9E9E9;
						border-radius: 5px;
						margin: 36rpx 0 0 36rpx;
					}
					.card-num-round{
						display: flex;
						justify-content: space-between;
					
						.item-name-num{
							font-size: 32rpx;
							font-family: SourceHanSansSC;
							font-weight: 500;
							color: #FFFFFF;
							margin: 116rpx 0 0 36rpx;
							.num-code{
								font-size: 28rpx;
								margin-top:34rpx;
							}
						}
						.color-box{
							display: flex;
							align-items: center;
							margin: 170rpx 36rpx 0 0;
							.red-round{
								width: 71rpx;
								height: 71rpx;
								border-radius: 50%;
								background-color: #FF5023;
								z-index: 9;
							}
							.red-yellow{
								width: 71rpx;
								height: 71rpx;
								border-radius: 50%;
								background-color: #FFCD00;
								margin-left: -20rpx;
							}
						}
					}
				}
			}
		}
		.popup-wrap{
			width: 690rpx;
		}
		.popup-main{
			
			background: #FFFFFF;
			padding: 0 30rpx;
			.item-title{
				text-align: center;
				padding-top:63rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303442;
			}
			.subhead{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #73757F;
				text-align: center;
				padding: 20rpx 0 36rpx 0;
			}
			.imput-title{
				box-sizing: border-box;
				width: 100%;
				height: 100rpx;
				background: #F3F3F3;
				line-height: 100rpx;
				padding: 0 38rpx 0 20rpx;
				display: flex;
				align-items: center;
				.title{
					flex:3;
				}
				.picker{
					flex:8;
					
					.prcker-name{
						font-size: 24rpx;
						color: #73757F;
						padding-left: 76rpx;
					}
				}
				.iconfont{
					color:#999999;
					flex:0;
				}
				.uni-input{
					flex:5;
				}
			}
		}
		.footer{
			margin-top: 76rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.cancel{
				height: 90rpx;
				line-height: 90rpx;
				flex: 5;
				text-align: center;
				background: #666666;
			}
			.save{
				height: 90rpx;
				line-height: 90rpx;
				flex: 5;
				text-align: center;
				background: linear-gradient(90deg, #B83DF1, #852CAE);
			}
		}
	}
</style>
